import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15

import MyApp 1.0
import Device 1.0

ListView {
    property int cur_id: 255
    property int cur_index: 255

    clip: true

    ScrollBar.vertical: ScrollBar {
        policy: ScrollBar.AlwaysOn
    }

    model: server.deviceList
    delegate: Rectangle {
        anchors {
            left: parent.left
            right: parent.right
        }

        height: 160
        color: modelData.device_id === device_list.cur_id ? "#B0D8FF" : "#F5F9FC"

        MouseArea {
            anchors.fill: parent

            onClicked: function (mouse) {
                device_list.cur_id = modelData.device_id
                device_list.cur_index = index
            }
        }

        ColumnLayout {
            anchors.fill: parent
            anchors.margins: 25
            spacing: 15
            RowLayout {
                Layout.fillWidth: true
                Layout.alignment: Qt.AlignTop
                height: 40
                spacing: 15
                Rectangle {
                    Layout.alignment: Qt.AlignVCenter
                    width: 20
                    height: 20
                    radius: 10
                    color: {
                        switch (modelData.device_status) {
                        case Types.IDLE:
                            return "green"
                        case Types.MEASURING:
                            return "yellow"
                        case Types.UNKNOWN:
                            return "yellow"
                        case Types.TIMEOUT:
                            return "red"
                        case Types.DISCONNECTED:
                            return "red"
                        default:
                            return "red"
                        }
                    }
                }
                Label {
                    Layout.alignment: Qt.AlignVCenter
                    text: "测量设备"
                    font.pixelSize: 40
                }
                Item {
                    Layout.fillWidth: true
                }
                Label {
                    Layout.alignment: Qt.AlignVCenter
                    text: "ID:" + modelData.device_id
                    font.pixelSize: 30
                }
            }
            RowLayout {
                Layout.fillWidth: true
                Layout.alignment: Qt.AlignTop
                height: 40
                spacing: 15
                Label {
                    id: status_label
                    Layout.alignment: Qt.AlignBottom
                    property string currentText
                    currentText: {
                        switch (modelData.device_status) {
                        case Types.IDLE:
                            return "IDLE"
                        case Types.MEASURING:
                            return "MEASURE"
                        case Types.UNKNOWN:
                            return "WAITING"
                        case Types.TIMEOUT:
                            return "TIMEOUT"
                        case Types.DISCONNECTED:
                            return "OFFLINE"
                        default:
                            return "UNDEFINED"
                        }
                    }

                    font.pixelSize: 30
                    opacity: 1.0

                    SequentialAnimation {
                        id: fadeAnimation
                        running: false
                        NumberAnimation {
                            target: status_label
                            property: "opacity"
                            to: 0
                            duration: 100 // 淡出动画
                        }
                        ScriptAction {
                            script: {
                                // 在淡出结束时更新文本
                               status_label.text = status_label.currentText // 保存当前的文本内容
                            }
                        }
                        NumberAnimation {
                            target: status_label
                            property: "opacity"
                            to: 1
                            duration: 100 // 淡入动画
                        }
                    }

                    // 每次文字变化时触发淡出和淡入
                    onCurrentTextChanged: {
                        fadeAnimation.start()
                    }
                }
                Item {
                    Layout.fillWidth: true
                }
                Label {
                    Layout.alignment: Qt.AlignBottom
                    text: modelData.status === Device.DISCONNECTED ? "" : "IP:" + modelData.ip_addr
                    font.pixelSize: 30
                }
            }
        }
        Component.onCompleted: {
            console.log(modelData.status)
        }
    }
}
